<template>
  <div class="classification">
    <a-row :gutter="20">
      <a-col :span="6">
        <a-radio-group v-model="categorySelected" type="button" class="classification-category">
          <a-radio v-for="(item, index) in categoryList" :key="index" :value="item.value">{{ item.name }}</a-radio>
        </a-radio-group>
      </a-col>
      <a-col :span="18">
        <a-calendar></a-calendar>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './classification.ts';

export default {
  name: 'ClassificationDom',
  setup() {
    const { base, init } = importConfig();
    init();
    return {
      ...toRefs(base),
      init,
    };
  },
};
</script>

<style scoped lang="less">
.classification {
  &-category {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    background-color: #eee;

    :deep(.arco-radio-button) {
      padding: 5px;
      background-color: white;
    }

    :deep(.arco-radio-button.arco-radio-checked) {
      background-color: #1890ff !important;
      color: white;
    }
  }
}
</style>
